<!--
 * @Description: 
 * @Date: 2023-11-01 23:02:09
 * @LastEditTime: 2023-12-19 23:36:43
-->
<template>
	<div class="listDialog" v-if="!props.type" v-click-outside="onClickOutside">
		<div class="listDialog-title">A党支部</div>
		<div class="listDialog-content">
			<flowGrid :titleShow="false" :id="id"></flowGrid>
		</div>
	</div>
	<!-- <div class="listDialog" v-else>
		<span
			@click="proxy.$attrs.cancelButton()"
			style="position: absolute; top: -10px; right: 10px; font-size: 25px; color: #fff"
		>
			x
		</span>
		<img src="../../assets/mapD.png" />
	</div> -->
</template>
<script setup>
import flowGrid from '../../pages/home/components/flowGrid/index.vue';
import { getCurrentInstance, ref, defineProps } from 'vue';
const { proxy } = getCurrentInstance();
let showPop = ref(true);

const props = defineProps({
	id: {
		type: String
	}
});

const vClickOutside = {
	mounted(el, binding) {
		function eventHandler(e) {
			if (el.contains(e.target)) {
				return false;
			}
			// 如果绑定的参数是函数，正常情况也应该是函数，执行
			if (binding.value && typeof binding.value === 'function') {
				binding.value(e);
			}
		}
		// 用于销毁前注销事件监听
		el.__click_outside__ = eventHandler;
		// 添加事件监听
		document.addEventListener('click', eventHandler);
	},
	unmounted(el) {
		// 移除事件监听
		document.removeEventListener('click', el.__click_outside__);
		// 删除无用属性
		delete el.__click_outside__;
	}
};
const onClickOutside = () => {
	proxy.$attrs.cancelButton();
};
</script>
<style>
.listDialog {
	width: 776px;
	height: 560px;
	background: #60151a;
	border: 1px solid rgba(255, 147, 38, 0.35);
	opacity: 0.9;
	border-radius: 10px;
	position: fixed;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	.listDialog-title {
		width: 100%;
		height: 30px;
		line-height: 30px;
		text-align: center;
		color: #d5c7a6;
		background-image: url('../../assets/dTitle.png');
	}
	.listDialog-content {
		width: 100%;
		flex: 1;
		overflow: hidden;
	}
}
</style>
